<template>
  <div id="home">
    <!-- 组织主要公益事项 -->
    <div class="welfare" ref="welfareRef">
      <Suspense>
        <template #default>
          <Welfare></Welfare>
        </template>
        <template #fallback>
          <el-skeleton :rows="5" animated />
        </template>
      </Suspense>
    </div>
    <!-- 公益数据展示 -->
    <div class="record" ref="recordRef">
      <Suspense>
        <template #default>
          <Record></Record>
        </template>
        <template #fallback>
          <el-skeleton :rows="5" animated />
        </template>
      </Suspense>
    </div>
    <!-- 暖心行动与爱同行 -->
    <div class="activity">
      <Suspense>
        <template #default>
          <Activity :type="0" :data="state.activeData[0]"></Activity>
        </template>
        <template #fallback>
          <el-skeleton :rows="5" animated />
        </template>
      </Suspense>
    </div>
    <!-- 公益作用 -->
    <div class="publicwelfare">
      <Suspense>
        <template #default>
          <Publicwelfare></Publicwelfare>
        </template>
        <template #fallback>
          <el-skeleton :rows="5" animated />
        </template>
      </Suspense>
    </div>
    <!-- 以往公益记录 -->
    <div class="previou">
      <Suspense>
        <template #default>
          <Previou></Previou>
        </template>
      </Suspense>
    </div>
    <!-- 欢迎加入我们这个大家庭 -->
    <div class="activity">
      <Suspense>
        <template #default>
          <Activity :type="1" :data="state.activeData[1]"></Activity>
        </template>
        <template #fallback>
          <el-skeleton :rows="5" animated />
        </template>
      </Suspense>
    </div>
    <!-- 新闻资讯 -->
    <div class="newInfo">
      <Suspense>
        <template #default>
          <NewsInfo></NewsInfo>
        </template>
      </Suspense>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  Welfare,
  Record,
  Activity,
  Publicwelfare,
  Previou,
  NewsInfo
} from '@/components/client/home'
import { onMounted, ref, onDeactivated, reactive } from 'vue'
import currScroll from '@/hooks/scroll'

// 记录当前浏览进度
currScroll()

// 获取公益事项DOM
const welfareRef = ref<InstanceType<typeof Element>>()
// 获取公益数据DOM
const recordRef = ref<InstanceType<typeof Element>>()
// 暖心行动数据
const state = reactive({
  activeData: [] as any[]
})

state.activeData.push({
  title: '暖心行动与爱同行',
  titE: 'GO WITH LOVE',
  des: '在每个项目村设立儿童福利主任。他们能及时发现困境儿童，又熟悉不同国家部门的政策，可以为困境儿童申请救助和提供帮助，如办理户口医保等。',
  cover:
    'https://26814353.s61i.faiusr.com/2/AD0Ikc-kDBACGAAgtKHmggYol4366wYwvwQ43gI.jpg.webp'
})
state.activeData.push({
  title: '欢迎加入我们这个大家庭',
  titE: 'EVENT REVIEW',
  des: '在中国，由于儿童福利制度尚未完善，还有数以千万计需要救助的贫困儿童。每年也还有新的脆弱儿童因家庭变故而陷入困境，了解掌握每个困境儿童的情况为儿童及其家庭提供急需的福利支持。',
  cover:
    'https://26814353.s61i.faiusr.com/2/AD0Ikc-kDBACGAAg9crmggYog_Oa_QMw_wQ4kAM.jpg'
})

// 滚动函数
const scrollFun = () => {
  // 显示与隐藏  公益事项
  if (document.documentElement.scrollTop > 480) {
    welfareRef.value?.classList.add('animate__animated')
    welfareRef.value?.classList.add('animate__fadeIn')
    welfareRef.value?.classList.remove('animate__fadeOut')
  } else {
    welfareRef.value?.classList.add('animate__animated')

    welfareRef.value?.classList.add('animate__fadeOut')
  }
  // 显示与隐藏 公益项目数据
  if (document.documentElement.scrollTop > 1000) {
    recordRef.value?.classList.add('animate__animated')
    recordRef.value?.classList.add('animate__fadeIn')
    recordRef.value?.classList.remove('animate__fadeOut')
  } else {
    recordRef.value?.classList.add('animate__animated')

    recordRef.value?.classList.add('animate__fadeOut')
  }
}

onMounted(() => {
  document.addEventListener('scroll', scrollFun, false)
})

onDeactivated(() => {
  document.removeEventListener('scroll', scrollFun)
})
</script>

<style scoped lang="less">
#home {
  background-color: #fff;
  .welfare {
    background-color: #fff;
  }
  .record {
    background-color: #fafafa;
    height: 243px;
    box-sizing: border-box;
  }
}
</style>
